<!-- 服务标签组件 -->
<template>
  <div class="service-tags">
    <ul class="tag-list">
      <li v-show="index < 3" v-for="(item, index) in list" :key="index">
        <span class="tag-item" :style="tagItemStyle(index)">
          {{ item.name }}
        </span>
      </li>
      <li>
        <img src="~assets/img/common/gt.svg" width="14px" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  components: {},
  methods: {
    tagItemStyle(index) {
      return (
        "background: url('" +
        this.list[index].icon +
        "') no-repeat center left;"
      );
    }
  }
};
</script>

<style scoped>
.service-tags {
  background: #fff;
}
.tag-list {
  padding: 16px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style-type: none;
}
.tag-item {
  padding-left: 18px;
  background-size: 14px 14px !important;
}
</style>
